import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Row, Col, Button, Input, Icon, Form} from 'antd';
import {InputItem} from '../../../../component/input/Input';
import {SearchForm} from '../../../../component/searchForm/SearchForm';
import {PositionBaseFormStore, addStore, listStore, searchStore} from '../PositionStore';
import './SearchBarStyle.less';

const FormItem = Form.Item;

@observer
export class PositionListSearchBar extends React.Component<any,any> {
    toggle(me){
        return function(){
            searchStore.OnExpand(searchStore.expand);
        }
    }

    onClear(me){
        return function(){
            searchStore.clearSearch(listStore);
        }
    }
    
    onSearch(me){
        return function(){      
            listStore.load(searchStore.getValues());
        }
    }

    componentWillUnmount(){
        searchStore.clearSearchState();
    }

    render() {
        return (
            <div>
                <Row gutter={2} className="group-bar">
                    <Col span={21} style={{paddingLeft:10}}>
                        <Button type="primary" icon="plus-circle-o" onClick={()=>{addStore.load()}}>添加</Button>
                        <Button type="primary" icon="reload" onClick={()=>{listStore.refresh(searchStore)}} loading={listStore._RefreshLoading}>刷新</Button>
                    </Col>
                    <Col span={3} style={{display: 'flex', justifyContent:'flex-end'}}>
                        <Button style = {{ marginLeft: 8, marginRight: 0 }} onClick = {this.toggle(this)}>搜索<Icon type={searchStore.expand ? 'up' : 'down'} /></Button>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <SearchForm onClear={this.onClear(this)} onSearch = {this.onSearch(this)} store={searchStore}>
                            <SearchFormItem />
                        </SearchForm>
                    </Col>
                </Row>
            </div>
        )
    }
}

@observer
class SearchFormItem extends React.Component<any,any>{
    render(){
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
        };

        return (
            <div>
                <Row>
                    <Col span={8}>
                        <InputItem {...formItemLayout} 
                            myKey = "buName"
                            title = "业务方"
                            store = {searchStore}/>
                    </Col>
                    <Col span={8}>
                        <InputItem {...formItemLayout} 
                            myKey = "appName"
                            title = "应用名称"
                            store = {searchStore}/>
                    </Col>
                    <Col span={8}>
                        <InputItem {...formItemLayout} 
                            myKey = "platformName"
                            title = "平台"
                            store = {searchStore}/>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <InputItem {...formItemLayout} 
                            myKey = "pageName"
                            title = "页面"
                            store = {searchStore}/>
                    </Col>
                    <Col span={8}>
                        <InputItem {...formItemLayout} 
                            myKey = "positionName"
                            title = "广告位标题"
                            store = {searchStore}/>
                    </Col>
                </Row>
            </div>
        )
    }
}